<template>
    <el-dialog v-model="outerVisible" title="编辑角色信息" @close="closeUpdateRole" :close-on-click-modal="false" width="30%">
        <template #default>
            <el-dialog v-model="innerVisible" :title="showInfo" append-to-body width="30%"/>
        </template>
        <template #footer>
            <el-form class="demo-ruleForm" ref="ruleFormRef" :model="ruleForm" :rules="rules" :size="formSize" status-icon label-width="120px">
                <el-form-item label="角色" prop="roleName">
                    <el-input v-model="ruleForm.roleName" style="width:180px"/>
                </el-form-item>
                <el-form-item label="权限" prop="roleLevel">
                            <el-select v-model="ruleForm.roleLevel" placeholder="请选择权限">
                                <el-option label="允许修改用户数据" value="1" />
                                <el-option label="禁止修改用户数据" value="2" />
                            </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="updateRoleLoading">更新</el-button>
                    <el-button @click="closeUpdateRole">取消</el-button>
                </el-form-item>
            </el-form>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
    import {ref,PropType,computed,reactive,watch} from 'vue'
    import type {FormInstance,FormRules} from 'element-plus'
    import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
    import {updateRole} from '@/api/role'

    const innerVisible = ref(false)

    const showInfo = ref('')

    const ruleFormRef = ref<FormInstance>()

    const formSize = ref('default')

    const updateRoleLoading = ref(false)

    const emit = defineEmits(['closeUpdateRole','completeUpdateRole'])

    interface roleInfoType {
        id: number,
        roleName: string,
        roleLevel: number
    }

    const props = defineProps({
        role: Object,
        updateRoleShow: Boolean,
        roleInfo: Object as PropType<roleInfoType>
    })

    const outerVisible = computed({
        get() {
            return props.updateRoleShow
        },
        set(value) {
            emit('closeUpdateRole',"close update role")
        }
    })

    const closeUpdateRole = () => {
        outerVisible.value = false
    }

    const ruleForm = reactive({
        id: '',
        roleName: '',
        roleLevel: ''
    })

    const rules = reactive<FormRules>({
        roleName: [
            {required: true, message: '请输入角色', trigger: 'blur'},
            {min: 2, max: 10, message: '姓名长度在2到10个字符', trigger: 'blur'}
        ]
    })

    const submitForm = async(formEl: FormInstance | undefined) => {
        if(!formEl) return
        await formEl.validate((valid,fields) => {
            if(valid) {
                submitUpdateRole()
                closeUpdateRole()
            } else {
                console.log(fields)
            }
        })
    }

    const submitUpdateRole = async() => {
        updateRoleLoading.value = true
        console.log(ruleForm)
        try {   
            const updateRoleResult:any = await updateRole(ruleForm)
            console.log(updateRoleResult);
            
            updateRoleLoading.value = false
            if(updateRoleResult.data) {
                console.log(updateRoleResult)
                emit('completeUpdateRole')
                outerVisible.value = false
                ElMessage({
                    type: 'info',
                    message: updateRoleResult.info.msg,
                })
            } else {
                showInfoBox(updateRoleResult.info.msg)
            }
        } catch(error) {
            console.log(error)
            updateRoleLoading.value = false
        }
    }

    const showInfoBox = (info:string) => {
        showInfo.value = info
        innerVisible.value = true
    }

    watch(() => props.roleInfo,(newValue:any,oldValue:any) => {
        console.log(newValue)
        console.log(oldValue)
        ruleForm.id = newValue.id
        ruleForm.roleName = newValue.roleName
        ruleForm.roleLevel = newValue.roleLevel
    })
</script>